
<template>
  <el-row class='upload-container'>
    <el-upload multiple
               accept=".png,.jpg,.docx,.doc,.xlsx,.xls"
               :action="uploadImgUrl"
               :headers="headers"
               :on-remove="removeImage"
               :on-success="handleUploadSuccess"
               :before-upload="handleBeforeUpload"
               :on-error="handleUploadError"
               drag>
      <i><img src="@/assets/images/message/Slice 35@2x.png"
             alt=""></i>
      <div class="el-upload__text">
        <p>点击或将文件拖到此处上传</p>
        <span>支持扩展名:.rar.zip.doc.docx.pdf.jpg…</span>
      </div>
      <div class="el-upload__tip"
           slot="tip"
           v-if="isShowTip">
        只能上传<b style="color: #f56c6c">{{ fileType.join("/") }}</b>文件，
        且不超过<b style="color: #f56c6c">{{ fileSize }}MB</b>
      </div>
    </el-upload>
  </el-row>
</template>

<script>
// 上传应用
import { getToken } from "@/utils/auth";
export default {
  data () {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileType: ["png", "jpg", "docx", "doc", "xls", "xlsx"],
      fileIdList: [],
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 3,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },

  },
  watch: {

  },
  computed: {
    // 是否显示提示
    showTip () {
      return this.isShowTip && (this.fileType || this.fileSize);
    }
  },
  methods: {
    removeImage () {
      this.$emit("input", "");
    },
    handleUploadSuccess (res) {
      var fileId = res.fileId
      var fileIdList = this.fileIdList;
      if (fileIdList.length == 0) {
        fileIdList.push(fileId);
      } else {
        //判断fileId 在fileIdList 中是否存在
        if (fileIdList.indexOf(fileId) == -1) {
          //不存在，则塞值
          fileIdList.push(fileId);
        }
      }

      // JSON.parse(JSON.stringify(fileIdList))
      this.fileIdList = fileIdList;
      this.$emit("input", JSON.stringify(fileIdList));
      this.loading.close();
    },
    handleBeforeUpload () {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError () {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep.el-upload {
  .el-upload-dragger {
    background: red !important;
  }
}

img {
  width: 43px;
  height: 43px;
  margin-top: 43px;
}

.el-upload__text {
  display: flex;
  flex-direction: column;

  span {
    font-size: 12px;
  }

  p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #0b9eae;
  }
}
</style>
